<template>
  <div>
    <el-form label-width="90px" inline>
      <el-form-item label="统计范围：">
        <el-radio-group
          v-model="hourStore.generalViewConfigs.type"
          @change="handleGet()"
        >
          <el-radio value="yesterday">昨日</el-radio>
          <el-radio value="today">今日</el-radio>
          <el-radio value="24h">24小时内</el-radio>
          <el-radio value="1100">11:00以后</el-radio>
          <el-radio value="custom">自定义</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-date-picker
          v-model="hourStore.generalViewConfigs.custom"
          type="datetimerange"
          range-separator="至"
          start-placeholder="起始时间"
          end-placeholder="结束时间"
          :disabled="hourStore.generalViewConfigs.type !== 'custom'"
          style="width: 360px"
          @change="handleGet()"
        />
      </el-form-item>
    </el-form>
    <el-dialog
      v-model="isLoading"
      :append-to-body="false"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false"
      :center="true"
      width="280px"
      top="calc(50vh - 150px)"
    >
      <div
        style="
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;
        "
      >
        <el-icon class="is-loading" :size="128">
          <Loading />
        </el-icon>
        <p style="margin-top: 24px">加载中</p>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from "vue";
import dayjs from "dayjs";
import useHourStore from "@/store/hour.js";
import fetchSectors from "./fetchSectors.js";
import getSeatHours from "../common/getSeatHours.js";
import useCommonStore from "@/store/common.js";

const emit = defineEmits(["refresh"]);
const hourStore = useHourStore();
const commonStore = useCommonStore();
const isLoading = ref(false);

const handleGet = (immediately = true) => {
  let immediately2 = immediately || hourStore.generalViewConfigs.source == null;
  if (immediately2) {
    isLoading.value = true;
  }
  getSeatHours(range.value[0], range.value[1]).then((result) => {
    if (immediately2) {
      hourStore.generalViewConfigs.source = result;
      hourStore.generalViewConfigs.sourceSector = fetchSectors(result);
      hourStore.generalViewConfigs.sourceBuffer = null;
      emit("refresh");
    } else {
      let buffer = JSON.stringify(result);
      if (buffer != JSON.stringify(hourStore.generalViewConfigs.source)) {
        if (hourStore.generalViewConfigs.sourceBuffer == null) {
          hourStore.generalViewConfigs.sourceBuffer = buffer;
        } else if (
          buffer == JSON.stringify(hourStore.generalViewConfigs.sourceBuffer)
        ) {
          hourStore.generalViewConfigs.source = result;
          hourStore.generalViewConfigs.sourceSector = fetchSectors(result);
          hourStore.generalViewConfigs.sourceBuffer = null;
        }
      }
    }
    isLoading.value = false;
  });
};

const range = computed(() => {
  // console.log(
  //   "hourStatus.generalView.isSeatAvailable",
  //   seatStore.isSeatAvailable
  // );
  if (commonStore.isReal) {
    if (hourStore.generalViewConfigs.type == "1100") {
      if (dayjs().hour() < 11) {
        return [
          dayjs().subtract(1, "days").format("YYYY-MM-DD") + " 11:00:00",
          dayjs().format("YYYY-MM-DD") + " 11:00:00",
        ];
      } else {
        return [
          dayjs().format("YYYY-MM-DD") + " 11:00:00",
          dayjs().add(1, "day").format("YYYY-MM-DD") + " 11:00:00",
        ];
      }
    } else if (hourStore.generalViewConfigs.type == "24h") {
      return [
        dayjs().subtract(24, "hour").format("YYYY-MM-DD HH:mm:ss"),
        dayjs().format("YYYY-MM-DD HH:mm:ss"),
      ];
    } else if (hourStore.generalViewConfigs.type == "today") {
      return [
        dayjs().format("YYYY-MM-DD") + " 00:00:00",
        dayjs().add(1, "day").format("YYYY-MM-DD") + " 00:00:00",
      ];
    } else if (hourStore.generalViewConfigs.type == "yesterday") {
      return [
        dayjs().subtract(1, "day").format("YYYY-MM-DD") + " 00:00:00",
        dayjs().format("YYYY-MM-DD") + " 00:00:00",
      ];
    } else if (hourStore.generalViewConfigs.type == "custom") {
      return [
        dayjs(hourStore.generalViewConfigs.custom[0]).format(
          "YYYY-MM-DD HH:mm:ss"
        ),
        dayjs(hourStore.generalViewConfigs.custom[1]).format(
          "YYYY-MM-DD HH:mm:ss"
        ),
      ];
    }
  } else {
    let fakeRange = ["2024-04-08 11:00:00", "2024-04-09 11:00:00"];
    console.log("hourStatus.generalView.fakeRange", fakeRange);
    return fakeRange;
  }
});

let refreshTimer = null;

onMounted(() => {
  handleGet();
  refreshTimer = setInterval(() => {
    handleGet(false);
  }, 10 * 1000);
});

onUnmounted(() => {
  clearInterval(refreshTimer);
});
</script>
